<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<!-- InstanceBegin template="/Templates/tool.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- InstanceBeginEditable name="doctitle" -->
    <link rel="stylesheet" type="text/css" href="qrx/qreditor.css">
    <!--<link rel="stylesheet" type="text/css" href="qrx/qrtable.css">-->
    <link rel="stylesheet" type="text/css" href="qrx/qrpulldown.css">
    <!-- InstanceEndEditable -->
    <style type="text/css">
        <!--
        body, td, th {
            font-family: Verdana, 宋体;
            font-size: 14px;
        }

        body {
            margin-left: 0px;
            margin-top: 0px;
            width: 100%;
            overflow-x:hidden;
        }

        a {
            color: #0000FF;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
            color: #990000;
        }

        .draggable-window {
            position: absolute;
            background-color: rgba(173, 216, 230, 0.9);
            border: 1px solid #ff311b;
            top:500px;
            left:90px;
            width: 270px;
            height: auto;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            cursor: move;
        }
        .draggable-header {
            background-color: #f1f1f1;
            padding: 2px;
            cursor: move;
            user-select: none; /* Prevent text selection while dragging */
        }
        -->
    </style>

    <!-- InstanceBeginEditable name="head" -->
    <style type="text/css">
        <!--
        .QrCSSDesignerPad {
            margin-top: 5px;
            width: 100%;
        }

        .QrCSSDesignerPadLeft {
            width: 25%;
        }

        -->
    </style>
    <SCRIPT lang="JavaScript" src="qrx/qrxpcom.js"></SCRIPT>
    <SCRIPT lang="JavaScript" src="qrx/qrcpicker.js"></SCRIPT>
    <SCRIPT lang="JavaScript" src="qrx/qrcpulldown.js"></SCRIPT>
    <SCRIPT lang="JavaScript" src="qrx/qrcspinner.js"></SCRIPT>
    <script lang="JavaScript"><!--

    QrXPCOM.cssToJsMap = new Array;
    QrXPCOM.cssToJsMap["background"] = "background";
    QrXPCOM.cssToJsMap["background-attachment"] = "backgroundAttachment";
    QrXPCOM.cssToJsMap["background-color"] = "backgroundColor";
    QrXPCOM.cssToJsMap["background-image"] = "backgroundImage";
    QrXPCOM.cssToJsMap["background-position"] = "backgroundPosition";
    QrXPCOM.cssToJsMap["background-position-x"] = "backgroundPositionX";
    QrXPCOM.cssToJsMap["background-position-y"] = "backgroundPositionY";
    QrXPCOM.cssToJsMap["background-repeat"] = "backgroundRepeat";
    QrXPCOM.cssToJsMap["behavior"] = "behavior";
    QrXPCOM.cssToJsMap["border"] = "border";
    QrXPCOM.cssToJsMap["border-bottom"] = "borderBottom";
    QrXPCOM.cssToJsMap["border-bottom-color"] = "borderBottomColor";
    QrXPCOM.cssToJsMap["border-bottom-style"] = "borderBottomStyle";
    QrXPCOM.cssToJsMap["border-bottom-width"] = "borderBottomWidth";
    QrXPCOM.cssToJsMap["border-color"] = "borderColor";
    QrXPCOM.cssToJsMap["border-left"] = "borderLeft";
    QrXPCOM.cssToJsMap["border-left-color"] = "borderLeftColor";
    QrXPCOM.cssToJsMap["border-left-style"] = "borderLeftStyle";
    QrXPCOM.cssToJsMap["border-left-width"] = "borderLeftWidth";
    QrXPCOM.cssToJsMap["border-right"] = "borderRight";
    QrXPCOM.cssToJsMap["border-right-color"] = "borderRightColor";
    QrXPCOM.cssToJsMap["border-right-style"] = "borderRightStyle";
    QrXPCOM.cssToJsMap["border-right-width"] = "borderRightWidth";
    QrXPCOM.cssToJsMap["border-style"] = "borderStyle";
    QrXPCOM.cssToJsMap["border-top"] = "borderTop";
    QrXPCOM.cssToJsMap["border-top-color"] = "borderTopColor";
    QrXPCOM.cssToJsMap["border-top-style"] = "borderTopStyle";
    QrXPCOM.cssToJsMap["border-top-width"] = "borderTopWidth";
    QrXPCOM.cssToJsMap["border-width"] = "borderWidth";
    QrXPCOM.cssToJsMap["bottom"] = "bottom";
    QrXPCOM.cssToJsMap["clear"] = "clear";
    QrXPCOM.cssToJsMap["clip"] = "clip";
    QrXPCOM.cssToJsMap["color"] = "color";
    QrXPCOM.cssToJsMap["cursor"] = "cursor";
    QrXPCOM.cssToJsMap["direction"] = "direction";
    QrXPCOM.cssToJsMap["display"] = "display";
    QrXPCOM.cssToJsMap["filter"] = "filter";
    QrXPCOM.cssToJsMap["font"] = "font";
    QrXPCOM.cssToJsMap["font-family"] = "fontFamily";
    QrXPCOM.cssToJsMap["font-size"] = "fontSize";
    QrXPCOM.cssToJsMap["font-style"] = "fontStyle";
    QrXPCOM.cssToJsMap["font-variant"] = "fontVariant";
    QrXPCOM.cssToJsMap["font-weight"] = "fontWeight";
    QrXPCOM.cssToJsMap["height"] = "height";
    QrXPCOM.cssToJsMap["layout-flow"] = "layoutFlow";
    QrXPCOM.cssToJsMap["layout-grid"] = "layoutGrid";
    QrXPCOM.cssToJsMap["layout-grid-char"] = "layoutGridChar";
    QrXPCOM.cssToJsMap["layout-grid-line"] = "layoutGridLine";
    QrXPCOM.cssToJsMap["layout-grid-mode"] = "layoutGridMode";
    QrXPCOM.cssToJsMap["layout-grid-type"] = "layoutGridType";
    QrXPCOM.cssToJsMap["left"] = "left";
    QrXPCOM.cssToJsMap["letter-spacing"] = "letterSpacing";
    QrXPCOM.cssToJsMap["line-break"] = "lineBreak";
    QrXPCOM.cssToJsMap["line-height"] = "lineHeight";
    QrXPCOM.cssToJsMap["margin"] = "margin";
    QrXPCOM.cssToJsMap["margin-bottom"] = "marginBottom";
    QrXPCOM.cssToJsMap["margin-left"] = "marginLeft";
    QrXPCOM.cssToJsMap["margin-right"] = "marginRight";
    QrXPCOM.cssToJsMap["margin-top"] = "marginTop";
    QrXPCOM.cssToJsMap["overflow"] = "overflow";
    QrXPCOM.cssToJsMap["overflow-x"] = "overflowX";
    QrXPCOM.cssToJsMap["overflow-y"] = "overflowY";
    QrXPCOM.cssToJsMap["padding"] = "padding";
    QrXPCOM.cssToJsMap["padding-bottom"] = "paddingBottom";
    QrXPCOM.cssToJsMap["padding-left"] = "paddingLeft";
    QrXPCOM.cssToJsMap["padding-right"] = "paddingRight";
    QrXPCOM.cssToJsMap["padding-top"] = "paddingTop";
    QrXPCOM.cssToJsMap["page-break-after"] = "pageBreakAfter";
    QrXPCOM.cssToJsMap["page-break-before"] = "pageBreakBefore";
    QrXPCOM.cssToJsMap["position"] = "position";
    QrXPCOM.cssToJsMap["right"] = "right";
    QrXPCOM.cssToJsMap["scrollbar-3dlight-color"] = "scrollbar3dLightColor";
    QrXPCOM.cssToJsMap["scrollbar-arrow-color"] = "scrollbarArrowColor";
    QrXPCOM.cssToJsMap["scrollbar-base-color"] = "scrollbarBaseColor";
    QrXPCOM.cssToJsMap["scrollbar-darkshadow-color"] = "scrollbarDarkShadowColor";
    QrXPCOM.cssToJsMap["scrollbar-face-color"] = "scrollbarFaceColor";
    QrXPCOM.cssToJsMap["scrollbar-highlight-color"] = "scrollbarHighlightColor";
    QrXPCOM.cssToJsMap["scrollbar-shadow-color"] = "scrollbarShadowColor";
    QrXPCOM.cssToJsMap["scrollbar-track-color"] = "scrollbarTrackColor";
    QrXPCOM.cssToJsMap["float"] = "styleFloat";
    QrXPCOM.cssToJsMap["text-align"] = "textAlign";
    QrXPCOM.cssToJsMap["text-align-last"] = "textAlignLast";
    QrXPCOM.cssToJsMap["text-autospace"] = "textAutospace";
    QrXPCOM.cssToJsMap["text-decoration"] = "textDecoration";
    QrXPCOM.cssToJsMap["text-indent"] = "textIndent";
    QrXPCOM.cssToJsMap["text-justify"] = "textJustify";
    QrXPCOM.cssToJsMap["text-kashida-space"] = "textKashidaSpace";
    QrXPCOM.cssToJsMap["text-overflow"] = "";
    QrXPCOM.cssToJsMap["text-transform"] = "textTransform";
    QrXPCOM.cssToJsMap["text-underline-position"] = "textUnderlinePosition";
    QrXPCOM.cssToJsMap["top"] = "top";
    QrXPCOM.cssToJsMap["unicode-bidi"] = "unicodeBidi";
    QrXPCOM.cssToJsMap["visibility"] = "visibility";
    QrXPCOM.cssToJsMap["white-space"] = "whiteSpace";
    QrXPCOM.cssToJsMap["width"] = "width";
    QrXPCOM.cssToJsMap["word-break"] = "wordBreak";
    QrXPCOM.cssToJsMap["word-spacing"] = "wordSpacing";
    QrXPCOM.cssToJsMap["word-wrap"] = "wordWrap";
    QrXPCOM.cssToJsMap["writing-mode"] = "writingMode";
    QrXPCOM.cssToJsMap["z-index"] = "zIndex";
    QrXPCOM.cssToJsMap["zoom"] = "zoom";
    QrXPCOM.cssToJsMap["border-top-left-radius"] = "borderTopLeftRadius";
    QrXPCOM.cssToJsMap["border-top-right-radius"] = "borderTopRightRadius";
    QrXPCOM.cssToJsMap["border-bottom-left-radius"] = "borderBottomLeftRadius";
    QrXPCOM.cssToJsMap["border-bottom-right-radius"] = "borderBottomRightRadius";

    var huoqu_flag = false;
    var connectInstanceMap = new Array;
    var connectInstanceOverrideMap = new Array;
    var styles = new Array;
    function connectCSS(obj, style, override) {
        connectInstanceMap[style] = obj;
        connectInstanceOverrideMap[style] = override;
        obj.onChange = function (value) {
            setTargetStyle(style, value);
        }
    }

    function connectCSS2(obj, objB, style, override) {
        connectInstanceMap[style] = new Array;
        connectInstanceMap[style][0] = obj;
        connectInstanceMap[style][1] = objB;
        connectInstanceOverrideMap[style] = override;
        obj.onChange = function (value) {
            value = value + objB.get();
            setTargetStyle(style, value);
        }
        objB.onChange = function (value) {
            value = obj.get() + value;
            setTargetStyle(style, value);
        }
    }

    function setTargetStyle(style, value) {
        try {
            if (style != 'visibility')
            {
                document.getElementById("target").style[QrXPCOM.cssToJsMap[style]] = value;
//            document.getElementById("target2").style[QrXPCOM.cssToJsMap[style]] = value;
//            document.getElementById("target3").style[QrXPCOM.cssToJsMap[style]] = value;

                styles[style] = value;
            }

        } catch (e) {
            document.getElementById("target").style[QrXPCOM.cssToJsMap[style]] = "";
//            document.getElementById("target2").style[QrXPCOM.cssToJsMap[style]] = "";
//            document.getElementById("target3").style[QrXPCOM.cssToJsMap[style]] = "";
            styles[style] = null;
        }

        var st;
        var cssstr = ".someclass {\n";
        for (st in styles) {
            if (styles[st]) cssstr += "\t" + st + " : " + styles[st] + ";\n";
        }
        cssstr += "}\n";
        document.getElementById("output").value = cssstr;
        //console.log.log(huoqu_flag);

        if (!huoqu_flag){
            //给designer发送变动消息
            var v_dict = {};
            v_dict[style]=value;
            var msg = {"key1":'setcss','key2':document.getElementById('cssTagname').value,'key3':v_dict};
            //console.log.log(JSON.stringify(msg));
            channel_designer_sendMessage(msg);
        }

    }

    function collapseSwitch(style) {
        if (document.getElementById(style).style.visibility != "hidden") {
            var st;
            for (st in connectInstanceOverrideMap[style]) {
                try {
                    connectInstanceMap[style].set("");
                } catch (x) {
                    connectInstanceMap[style][0].set("");
                }
                document.getElementById(st).style.display = "";
            }
            document.getElementById(style + "#switch").src = "qrx/extimg/arrowopen.gif";
            document.getElementById(style).style.visibility = "hidden";
            try {
                connectInstanceMap[style].set("");
            } catch (x) {
                connectInstanceMap[style][0].set("");
            }
        } else {
            var st;
            for (st in connectInstanceOverrideMap[style]) {
                try {
                    connectInstanceMap[style].set("");
                } catch (x) {
                    connectInstanceMap[style][0].set("");
                }
                document.getElementById(st).style.display = "none";
            }
            document.getElementById(style + "#switch").src = "qrx/extimg/arrowclose.gif";
            document.getElementById(style).style.visibility = "";
            try {
                connectInstanceMap[style].set("");
            } catch (x) {
                connectInstanceMap[style][0].set("");
            }
        }
    }

    function createTaniComponent(def) {
        if (!def) def = "px";
        var tan = new QrPulldown(def, 3);
        tan.render();
        tan.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> px = pixels", "px");
        tan.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> pt = 1/72in", "pt");
        tan.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> em = font-size", "em");
        tan.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> ex = x-height of font", "ex");
        tan.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> pc = 12pt", "pc");
        tan.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> cm", "cm");
        tan.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> mm", "mm");
        tan.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> in", "in");
        tan.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> %", "%");
        return tan;
    }
    function createTaniComponent2(def,name) {
        if (!def) def = "px";
        var tan = new QrPulldown(def, 3);
        if (name){
            tan.name = name;
        }
        tan.render();
        tan.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> px = pixels", "px");
        tan.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> pt = 1/72in", "pt");
        tan.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> em = font-size", "em");
        tan.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> ex = x-height of font", "ex");
        tan.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> pc = 12pt", "pc");
        tan.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> cm", "cm");
        tan.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> mm", "mm");
        tan.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> in", "in");
        tan.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> %", "%");
        return tan;
    }
    function innerset() {
        document.getElementById("target").innerHTML = document.getElementById("innerset").value;
    }

    --></script>

    <!-- InstanceEndEditable -->
    <style>
        .fixed-header {
            position: sticky;
            top: 0;
            background-color: #6fffec; /* 确保背景色覆盖其他内容 */
            z-index: 1; /* 确保在其他内容之上 */
        }
    </style>
</head>
<body>

<div class="draggable-window" id="dragWindow" style="visibility: hidden;">
    <div class="draggable-header" id="dragHeader">样式显示DEMO</div>
    <div style="width:250px;height:150px;">

        <div style="background-image:url('qrx/grid.gif'); padding:10px; margin:10px 5px 15px 20px; width:210px;height:50px;">
            <div id="target">
                CSS 样式 在线编辑器<br/>
                <br/>
                CSS 样式效果即时演示区域。
            </div>
        </div>
        <TEXTAREA id="output" rows="7" style=" margin:-10px 0px 0px 20px; width:225px; border:1px solid gray;">
        </TEXTAREA><br/>

    </div>

    <div style="width:295px;height:auto;">

        <TEXTAREA id="innerset" rows="7"
                  style=" margin-top:20px;margin-left:20px;margin-right:20px; width:225px; border:1px solid gray;">请在此输入想要在效果演示中显示的内容，内容可以是html，按确认键即可在上面演示区域查看效果。
        </TEXTAREA><br>
        <input type="submit" style="margin-left:20px; border:1px solid gray;" onclick="innerset();" value="确认查看演示效果">

    </div>
</div>

<table class="QrCSSDesignerPad">
    <tr class="fixed-header">
        <td></td>
        <td class="QrCSSDesignerPadLeft">编辑对象:</td>
        <td style="width: 350px">
            <input type="text" id="main_el_id" placeholder="main element id" style="width: 100%">
            <button id="delElement">删除组件</button>
            <input type="text" id="new_main_el_id" placeholder="new main element id" style="width: 100%">
            <button id="modElementId">修改组件ID</button>
            <input type="text" id="cssTagname" placeholder="css element tag or id" style="width: 100%">
            <button id="getElementCss">获取元素样式</button>
            <button id="setElementCss" style="visibility: hidden">设置样式</button>
        </td>
    </tr>
    <tr>
        <td colspan="3" align="center">
            <hr size="1" width="100%">
        </td>
    </tr>
    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">字体颜色 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--
            var cp = new QrColorPicker("RGBA(0,0,0,1)");
            cp.render();
            connectCSS(cp, "color");
            --></SCRIPT>
        </td>
    </tr>
    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">文字字体 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addFont(fontname) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> <span style='font-family:" + fontname + "'>" + fontname + "</span>", fontname);
            }
            addFont("serif");
            addFont("sans-serif");
            addFont("cursive");
            addFont("fantasy");
            addFont("monospace");
            connectCSS(pl, "font-family");

            --></SCRIPT>
        </td>
    </tr>

    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">文字大小 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addFont(fontname) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> <span style='font-family:" + fontname + "'>" + fontname + "</span>", fontname);
            }
            addFont("9pt");
            addFont("10pt");
            addFont("12pt");
            addFont("14pt");
            addFont("16pt");
            addFont("xx-small");
            addFont("x-small");
            addFont("small");
            addFont("large");
            addFont("x-large");
            addFont("xx-large");
            connectCSS(pl, "font-size");

            --></SCRIPT>
        </td>
    </tr>

    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">文字粗细 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addItem(fontname) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> " + fontname, fontname);
            }
            addItem("normal");
            addItem("bold");
            addItem("600");
            addItem("900");
            connectCSS(pl, "font-weight");

            --></SCRIPT>
        </td>
    </tr>


    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">文字样式 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addItem(fontname) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> " + fontname, fontname);
            }
            addItem("normal");
            addItem("italic");
            addItem("oblique");
            connectCSS(pl, "font-style");

            --></SCRIPT>
        </td>
    </tr>

    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">文字变量 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addItem(fontname) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> " + fontname, fontname);
            }
            addItem("normal");
            addItem("small-caps");
            connectCSS(pl, "font-variant");

            --></SCRIPT>
        </td>
    </tr>


    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">文字行高 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--
            var pl = new QrSpinner(100);
            pl.name='name="sgc0211"';
            pl.render();
            --></SCRIPT>
            <SCRIPT lang="JavaScript"><!--
            var tan = createTaniComponent("%");
            connectCSS2(pl, tan, "line-height");
            --></SCRIPT>
        </td>
    </tr>

    <tr>
        <td colspan="3" align="center">
            <hr size="1" width="100%">
        </td>
    </tr>

    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">背景颜色 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--
            var cp = new QrColorPicker("transparent");
            cp.render();
            connectCSS(cp, "background-color");
            --></SCRIPT>
        </td>
    </tr>
    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">背景图片 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addItem(item) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> " + item, item);
            }
            addItem("url(qrx/bj.png)");
            addItem("url(qrx/bg1080.png)");
            connectCSS(pl, "background-image");

            --></SCRIPT>
        </td>
    </tr>

    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">背景拉伸 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addItem(item) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> " + item, item);
            }
            addItem("repeat");
            addItem("repeat-x");
            addItem("repeat-y");
            addItem("no-repeat");
            connectCSS(pl, "background-repeat");

            --></SCRIPT>
        </td>
    </tr>

    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">背景定位 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addItem(item) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> " + item, item);
            }
            addItem("left");
            addItem("right");
            addItem("top");
            addItem("left top");
            addItem("right bottom");
            addItem("30% 50%");
            connectCSS(pl, "background-position");

            --></SCRIPT>
        </td>
    </tr>


    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">附加属性 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addItem(item) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> " + item, item);
            }
            addItem("fixed");
            addItem("scroll");
            connectCSS(pl, "background-attachment");

            --></SCRIPT>
        </td>
    </tr>
    <tr>
        <td colspan="3" align="center">
            <hr size="1" width="100%">
        </td>
    </tr>

    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">整体宽度 :</td>
        <td>
            <SCRIPT lang="JavaScript">
                var pl = new QrSpinner;
                pl.name='name="width_value"';
                pl.render();
            </SCRIPT>
            <SCRIPT lang="JavaScript">
                var tan = createTaniComponent();
                connectCSS2(pl, tan, "width");

            </SCRIPT>
        </td>
    </tr>

    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">整体高度 :</td>
        <td>
            <SCRIPT lang="JavaScript">
                var pl = new QrSpinner;
                pl.name='name="height"';
                pl.render();
            </SCRIPT>
            <SCRIPT lang="JavaScript">
                var tan = createTaniComponent();
                connectCSS2(pl, tan, "height");

            </SCRIPT>
        </td>
    </tr>


    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">溢出选项 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addItem(fontname) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> " + fontname, fontname);
            }
            addItem("visible");
            addItem("hidden");
            addItem("scroll");
            addItem("auto");
            connectCSS(pl, "overflow");

            --></SCRIPT>
        </td>
    </tr>
    <tr>
        <td colspan="3" align="center">
            <hr size="1" width="100%">
        </td>
    </tr>

    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">优先等级 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--
            var pl = new QrSpinner;
            pl.render();
            connectCSS(pl, "z-index");
            --></SCRIPT>
        </td>
    </tr>

    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">显示属性 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addItem(fontname) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> " + fontname, fontname);
            }
            addItem("");
            addItem("none");
            addItem("block");
            addItem("inline");
            addItem("run-in");
            addItem("compact");
            addItem("list-item");
            addItem("marker");
            connectCSS(pl, "display");

            --></SCRIPT>
        </td>
    </tr>

    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">是否可见 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addItem(fontname) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> " + fontname, fontname);
            }
            addItem("");
            addItem("visible");
            addItem("hidden");
            connectCSS(pl, "visibility");

            --></SCRIPT>
        </td>
    </tr>

    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">资源定位 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addItem(fontname) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> " + fontname, fontname);
            }
            addItem("static");
            addItem("relative");
            addItem("absolute");
            addItem("fixed");
            connectCSS(pl, "position");

            --></SCRIPT>
        </td>
    </tr>

    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">距离顶部 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--
            var pl = new QrSpinner;
            pl.render();
            --></SCRIPT>
            <SCRIPT lang="JavaScript"><!--
            var tan = createTaniComponent("px");
            connectCSS2(pl, tan, "top");
            --></SCRIPT>
        </td>
    </tr>
    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">距离左边 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--
            var pl = new QrSpinner;
            pl.render();
            --></SCRIPT>
            <SCRIPT lang="JavaScript"><!--
            var tan = createTaniComponent("px");
            connectCSS2(pl, tan, "left");
            --></SCRIPT>
        </td>
    </tr>
    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">距离右边 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--
            var pl = new QrSpinner;
            pl.render();
            --></SCRIPT>
            <SCRIPT lang="JavaScript"><!--
            var tan = createTaniComponent("px");
            connectCSS2(pl, tan, "right");
            --></SCRIPT>
        </td>
    </tr>
    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">距离底边 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--
            var pl = new QrSpinner;
            pl.render();
            --></SCRIPT>
            <SCRIPT lang="JavaScript"><!--
            var tan = createTaniComponent("px");
            connectCSS2(pl, tan, "bottom");
            --></SCRIPT>
        </td>
    </tr>


    <tr>
        <td colspan="3" align="center">
            <hr size="1" width="100%">
        </td>
    </tr>

    <tr>
        <td><img id="border-width#switch" src="qrx/extimg/arrowclose.gif" onclick="collapseSwitch('border-width');">
        </td>
        <td class="QrCSSDesignerPadLeft">边框宽度 :</td>
        <td><span id="border-width"><SCRIPT lang="JavaScript"><!--
        var pl = new QrSpinner;
        pl.render();
        var override = new Array;
        override["border-top-width"] = "";
        override["border-left-width"] = "";
        override["border-right-width"] = "";
        override["border-bottom-width"] = "";
        --></SCRIPT><SCRIPT lang="JavaScript"><!--
        var tan = createTaniComponent();
        connectCSS2(pl, tan, "border-width", override);
        --></SCRIPT></span></td>
    </tr>

    <tr id="border-top-width">
        <td></td>
        <td class="QrCSSDesignerPadLeft">上边宽度 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--
            var pl = new QrSpinner;
            pl.render();
            --></SCRIPT>
            <SCRIPT lang="JavaScript"><!--
            var tan = createTaniComponent();
            connectCSS2(pl, tan, "border-top-width");
            --></SCRIPT>
            </span></td>
    </tr>
    <tr id="border-left-width">
        <td></td>
        <td class="QrCSSDesignerPadLeft">左边宽度 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--
            var pl = new QrSpinner;
            pl.render();
            --></SCRIPT>
            <SCRIPT lang="JavaScript"><!--
            var tan = createTaniComponent();
            connectCSS2(pl, tan, "border-left-width");
            --></SCRIPT>
        </td>
    </tr>
    <tr id="border-right-width">
        <td></td>
        <td class="QrCSSDesignerPadLeft">右边宽度 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--
            var pl = new QrSpinner;
            pl.render();
            --></SCRIPT>
            <SCRIPT lang="JavaScript"><!--
            var tan = createTaniComponent();
            connectCSS2(pl, tan, "border-right-width");
            --></SCRIPT>
        </td>
    </tr>
    <tr id="border-bottom-width">
        <td></td>
        <td class="QrCSSDesignerPadLeft">底边宽度 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--
            var pl = new QrSpinner;
            pl.render();
            --></SCRIPT>
            <SCRIPT lang="JavaScript"><!--
            var tan = createTaniComponent();
            connectCSS2(pl, tan, "border-bottom-width");
            --></SCRIPT>
        </td>
    </tr>


    <tr>
        <td><img id="border-color#switch" src="qrx/extimg/arrowclose.gif" onclick="collapseSwitch('border-color');">
        </td>
        <td class="QrCSSDesignerPadLeft">边框颜色 :</td>
        <td>
            <span id="border-color">
                <SCRIPT lang="JavaScript">
                    var cp = new QrColorPicker("transparent");
                    cp.render();
                    var override = new Array;
                    override["border-top-color"] = "";
                    override["border-left-color"] = "";
                    override["border-right-color"] = "";
                    override["border-bottom-color"] = "";
                    connectCSS(cp, "border-color", override);
                </SCRIPT>
            </span>
        </td>
    </tr>


    <tr id="border-top-color">
        <td></td>
        <td class="QrCSSDesignerPadLeft">上边颜色 :</td>
        <td>
            <SCRIPT lang="JavaScript">
                var cp = new QrColorPicker("transparent");
                cp.render();
                connectCSS(cp, "border-top-color");
            </SCRIPT>
        </td>
    </tr>
    <tr id="border-left-color">
        <td></td>
        <td class="QrCSSDesignerPadLeft">左边颜色 :</td>
        <td>
            <SCRIPT lang="JavaScript">
                var cp = new QrColorPicker("transparent");
                cp.render();
                connectCSS(cp, "border-left-color");
            </SCRIPT>
        </td>
    </tr>
    <tr id="border-right-color">
        <td></td>
        <td class="QrCSSDesignerPadLeft">右边颜色 :</td>
        <td>
            <SCRIPT lang="JavaScript">
                var cp = new QrColorPicker("transparent");
                cp.render();
                connectCSS(cp, "border-right-color");
            </SCRIPT>
        </td>
    </tr>
    <tr id="border-bottom-color">
        <td></td>
        <td class="QrCSSDesignerPadLeft">底边颜色 :</td>
        <td>
            <SCRIPT lang="JavaScript">
                var cp = new QrColorPicker("transparent");
                cp.render();
                connectCSS(cp, "border-bottom-color");
            </SCRIPT>
        </td>
    </tr>

    <tr>
        <td><img id="border-style#switch" src="qrx/extimg/arrowclose.gif" onclick="collapseSwitch('border-style');">
        </td>
        <td class="QrCSSDesignerPadLeft">边框样式 :</td>
        <td>
            <span id="border-style">
                <SCRIPT lang="JavaScript"><!--

                var pl = new QrPulldown;
                pl.render();

                function addStyle(style) {
                    pl.addItem("<img src='qrx/transparentpixel.gif' style='width:10px;height:10px;border-width:3px;border-style:" + style + ";border-color:red' align='middle'/> " + style, style);
                }
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;border-width:3px;border-style:none;border-color:red;' align='middle'/> none", "none");
                addStyle("solid");
                addStyle("double");
                addStyle("groove");
                addStyle("ridge");
                addStyle("inset");
                addStyle("outset");
                addStyle("dashed");
                addStyle("dotted");
                var override = new Array;
                override["border-top-style"] = "";
                override["border-left-style"] = "";
                override["border-right-style"] = "";
                override["border-bottom-style"] = "";
                connectCSS(pl, "border-style", override);


                --></SCRIPT>
            </span>
        </td>
    </tr>


    <tr id="border-top-style">
        <td></td>
        <td class="QrCSSDesignerPadLeft">上边样式 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addStyle(style) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:10px;height:10px;border-width:3px;border-style:" + style + ";border-color:red' align='middle'/> " + style, style);
            }
            pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;border-width:3px;border-style:none;border-color:red;' align='middle'/> none", "none");
            addStyle("solid");
            addStyle("double");
            addStyle("groove");
            addStyle("ridge");
            addStyle("inset");
            addStyle("outset");
            addStyle("dashed");
            addStyle("dotted");
            connectCSS(pl, "border-top-style");

            --></SCRIPT>
        </td>
    </tr>

    <tr id="border-left-style">
        <td></td>
        <td class="QrCSSDesignerPadLeft">左边样式 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addStyle(style) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:10px;height:10px;border-width:3px;border-style:" + style + ";border-color:red' align='middle'/> " + style, style);
            }
            pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;border-width:3px;border-style:none;border-color:red;' align='middle'/> none", "none");
            addStyle("solid");
            addStyle("double");
            addStyle("groove");
            addStyle("ridge");
            addStyle("inset");
            addStyle("outset");
            addStyle("dashed");
            addStyle("dotted");
            connectCSS(pl, "border-left-style");
            --></SCRIPT>
        </td>
    </tr>

    <tr id="border-right-style">
        <td></td>
        <td class="QrCSSDesignerPadLeft">右边样式 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addStyle(style) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:10px;height:10px;border-width:3px;border-style:" + style + ";border-color:red' align='middle'/> " + style, style);
            }
            pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;border-width:3px;border-style:none;border-color:red;' align='middle'/> none", "none");
            addStyle("solid");
            addStyle("double");
            addStyle("groove");
            addStyle("ridge");
            addStyle("inset");
            addStyle("outset");
            addStyle("dashed");
            addStyle("dotted");
            connectCSS(pl, "border-right-style");

            --></SCRIPT>
        </td>
    </tr>

    <tr id="border-bottom-style">
        <td></td>
        <td class="QrCSSDesignerPadLeft">底边样式 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addStyle(style) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:10px;height:10px;border-width:3px;border-style:" + style + ";border-color:red' align='middle'/> " + style, style);
            }
            pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;border-width:3px;border-style:none;border-color:red;' align='middle'/> none", "none");
            addStyle("solid");
            addStyle("double");
            addStyle("groove");
            addStyle("ridge");
            addStyle("inset");
            addStyle("outset");
            addStyle("dashed");
            addStyle("dotted");
            connectCSS(pl, "border-bottom-style");
            --></SCRIPT>
        </td>
    </tr>




    <tr>
        <td colspan="3" align="center">
            <hr size="1" width="100%">
        </td>
    </tr>


    <tr>
        <td><img id="padding#switch" src="qrx/extimg/arrowclose.gif" onclick="collapseSwitch('padding');"></td>
        <td class="QrCSSDesignerPadLeft">内侧边距 :</td>
        <td>
            <span id="padding">
                <SCRIPT lang="JavaScript">
                    var pl = new QrSpinner;
                    pl.render();
                    var override = new Array;
                    override["padding-top"] = "";
                    override["padding-left"] = "";
                    override["padding-right"] = "";
                    override["padding-bottom"] = "";
                </SCRIPT>
                <SCRIPT lang="JavaScript">
                    var tan = createTaniComponent();
                    connectCSS2(pl, tan, "padding", override);

                </SCRIPT>
            </span>
        </td>
    </tr>

    <tr id="padding-top">
        <td></td>
        <td class="QrCSSDesignerPadLeft">上内边距 :</td>
        <td>
            <SCRIPT lang="JavaScript">
                var pl = new QrSpinner;
                pl.render();
            </SCRIPT>
            <SCRIPT lang="JavaScript">
                var tan = createTaniComponent();
                connectCSS2(pl, tan, "padding-top");

            </SCRIPT>
        </td>
    </tr>
    <tr id="padding-left">
        <td></td>
        <td class="QrCSSDesignerPadLeft">左内边距 :</td>
        <td>
            <SCRIPT lang="JavaScript">
                var pl = new QrSpinner;
                pl.render();
            </SCRIPT>
            <SCRIPT lang="JavaScript">
                var tan = createTaniComponent();
                connectCSS2(pl, tan, "padding-left");

            </SCRIPT>
        </td>
    </tr>
    <tr id="padding-right">
        <td></td>
        <td class="QrCSSDesignerPadLeft">右内边距 :</td>
        <td>
            <SCRIPT lang="JavaScript">
                var pl = new QrSpinner;
                pl.render();
            </SCRIPT>
            <SCRIPT lang="JavaScript">
                var tan = createTaniComponent();
                connectCSS2(pl, tan, "padding-right");

            </SCRIPT>
        </td>
    </tr>
    <tr id="padding-bottom">
        <td></td>
        <td class="QrCSSDesignerPadLeft">底内边距 :</td>
        <td>
            <SCRIPT lang="JavaScript">
                var pl = new QrSpinner;
                pl.render();
            </SCRIPT>
            <SCRIPT lang="JavaScript">
                var tan = createTaniComponent();
                connectCSS2(pl, tan, "padding-bottom");

            </SCRIPT>
        </td>
    </tr>


    <tr>
        <td colspan="3" align="center">
            <hr size="1" width="100%">
        </td>
    </tr>

    <tr>
        <td><img id="margin#switch" src="qrx/extimg/arrowclose.gif" onclick="collapseSwitch('margin');"></td>
        <td class="QrCSSDesignerPadLeft">外侧边距 :</td>
        <td>
            <span id="margin">
                <SCRIPT lang="JavaScript">
                    var pl = new QrSpinner;
                    pl.render();
                    var override = new Array;
                    override["margin-top"] = "";
                    override["margin-left"] = "";
                    override["margin-right"] = "";
                    override["margin-bottom"] = "";
                </SCRIPT>
                <SCRIPT lang="JavaScript">
                    var tan = createTaniComponent();
                    connectCSS2(pl, tan, "margin", override);
                </SCRIPT>
            </span>
        </td>
    </tr>

    <tr id="margin-top">
        <td></td>
        <td class="QrCSSDesignerPadLeft">上外边距 :</td>
        <td>
            <SCRIPT lang="JavaScript">
                var pl = new QrSpinner;
                pl.render();
            </SCRIPT>
            <SCRIPT lang="JavaScript">
                var tan = createTaniComponent();
                connectCSS2(pl, tan, "margin-top");

            </SCRIPT>
        </td>
    </tr>
    <tr id="margin-left">
        <td></td>
        <td class="QrCSSDesignerPadLeft">左外边距 :</td>
        <td>
            <SCRIPT lang="JavaScript">
                var pl = new QrSpinner;
                pl.render();
            </SCRIPT>
            <SCRIPT lang="JavaScript">
                var tan = createTaniComponent();
                connectCSS2(pl, tan, "margin-left");

            </SCRIPT>
        </td>
    </tr>
    <tr id="margin-right">
        <td></td>
        <td class="QrCSSDesignerPadLeft">右外边距 :</td>
        <td>
            <SCRIPT lang="JavaScript">
                var pl = new QrSpinner;
                pl.render();
            </SCRIPT>
            <SCRIPT lang="JavaScript">
                var tan = createTaniComponent();
                connectCSS2(pl, tan, "margin-right");

            </SCRIPT>
        </td>
    </tr>
    <tr id="margin-bottom">
        <td></td>
        <td class="QrCSSDesignerPadLeft">底外边距 :</td>
        <td>
            <SCRIPT lang="JavaScript">
                var pl = new QrSpinner;
                pl.render();
            </SCRIPT>
            <SCRIPT lang="JavaScript">
                var tan = createTaniComponent();
                connectCSS2(pl, tan, "margin-bottom");

            </SCRIPT>
        </td>
    </tr>




    <tr>
        <td colspan="3" align="center">
            <hr size="1" width="100%">
        </td>
    </tr>


    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">清除属性 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addItem(fontname) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> " + fontname, fontname);
            }
            addItem("left");
            addItem("right");
            addItem("both");
            addItem("none");
            connectCSS(pl, "clear");

            --></SCRIPT>
        </td>
    </tr>

    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">浮动属性 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addItem(fontname) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> " + fontname, fontname);
            }
            addItem("left");
            addItem("right");
            addItem("none");
            connectCSS(pl, "float");

            --></SCRIPT>
        </td>
    </tr>

    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">水平排列 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addItem(item) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> " + item, item);
            }
            addItem("left");
            addItem("right");
            addItem("center");
            addItem("justify");
            connectCSS(pl, "text-align");

            --></SCRIPT>
        </td>
    </tr>


    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">文本修饰 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addItem(item) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> " + item, item);
            }
            addItem("none");
            addItem("underline");
            addItem("overline");
            addItem("underline overline");
            addItem("line-through");
            addItem("blink");
            connectCSS(pl, "text-decoration");

            --></SCRIPT>
        </td>
    </tr>

    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">文本缩进 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--
            var pl = new QrSpinner;
            pl.render();
            --></SCRIPT>
            <SCRIPT lang="JavaScript"><!--
            var tan = createTaniComponent("em");
            connectCSS2(pl, tan, "text-indent");
            --></SCRIPT>
        </td>
    </tr>


    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">文字间距 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--
            var pl = new QrSpinner;
            pl.render();
            --></SCRIPT>
            <SCRIPT lang="JavaScript"><!--
            var tan = createTaniComponent("px");
            connectCSS2(pl, tan, "letter-spacing");
            --></SCRIPT>
        </td>
    </tr>

    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">字母间距 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--
            var pl = new QrSpinner;
            pl.render();
            --></SCRIPT>
            <SCRIPT lang="JavaScript"><!--
            var tan = createTaniComponent("px");
            connectCSS2(pl, tan, "word-spacing");
            --></SCRIPT>
        </td>
    </tr>


    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">文本转换 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addItem(item) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> " + item, item);
            }
            addItem("none");
            addItem("capitalize");
            addItem("lowercase");
            addItem("uppercase");
            connectCSS(pl, "text-transform");

            --></SCRIPT>
        </td>
    </tr>


    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">垂直排列 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addItem(item) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> " + item, item);
            }
            addItem("baseline");
            addItem("top");
            addItem("middle");
            addItem("bottom");
            addItem("text-top");
            addItem("text-bottom");
            addItem("super");
            addItem("sub");
            addItem("3em");
            addItem("30%");
            connectCSS(pl, "vertical-align");

            --></SCRIPT>
        </td>
    </tr>
    <tr>
        <td colspan="3" align="center">
            <hr size="1" width="100%">
        </td>
    </tr>
    <tr>
        <td></td>
        <td class="QrCSSDesignerPadLeft">鼠标指针 :</td>
        <td>
            <SCRIPT lang="JavaScript"><!--

            var pl = new QrPulldown;
            pl.render();

            function addItem(fontname) {
                pl.addItem("<img src='qrx/transparentpixel.gif' style='width:16px;height:16px;' align='middle'/> " + fontname, fontname);
            }
            addItem("crosshair");
            addItem("default");
            addItem("pointer");
            addItem("move");
            addItem("text");
            addItem("wait");
            addItem("help");
            addItem("n-resize");
            addItem("s-resize");
            addItem("w-resize");
            addItem("e-resize");
            addItem("ne-resize");
            addItem("nw-resize");
            addItem("se-resize");
            addItem("sw-resize");
            connectCSS(pl, "cursor");

            --></SCRIPT>
        </td>
    </tr>
    <tr>
        <td colspan="3" align="center">
            <hr size="1" width="100%">
            <h3>边框边角设置</h3>
        </td>
    </tr>
    <tr id="border-top-left-radius">
        <td></td>
        <td class="QrCSSDesignerPadLeft">上左半径 :</td>
        <td>
            <SCRIPT lang="JavaScript">
                var pl = new QrSpinner;
                pl.render();
            </SCRIPT>
            <SCRIPT lang="JavaScript">
                var tan = createTaniComponent();
                connectCSS2(pl, tan, "border-top-left-radius");

            </SCRIPT>
        </td>
    </tr>
    <tr id="border-top-right-radius">
        <td></td>
        <td class="QrCSSDesignerPadLeft">上右半径 :</td>
        <td>
            <SCRIPT lang="JavaScript">
                var pl = new QrSpinner;
                pl.render();
            </SCRIPT>
            <SCRIPT lang="JavaScript">
                var tan = createTaniComponent();
                connectCSS2(pl, tan, "border-top-right-radius");
            </SCRIPT>
        </td>
    </tr>
    <tr id="border-bottom-left-radius">
        <td></td>
        <td class="QrCSSDesignerPadLeft">下左半径 :</td>
        <td>
            <SCRIPT lang="JavaScript">
                var pl = new QrSpinner;
                pl.render();
            </SCRIPT>
            <SCRIPT lang="JavaScript">
                var tan = createTaniComponent();
                connectCSS2(pl, tan, "border-bottom-left-radius");
            </SCRIPT>
        </td>
    </tr>
    <tr id="border-bottom-right-radius">
        <td></td>
        <td class="QrCSSDesignerPadLeft">下右半径 :</td>
        <td>
            <SCRIPT lang="JavaScript">
                var pl = new QrSpinner;
                pl.render();
            </SCRIPT>
            <SCRIPT lang="JavaScript">
                var tan = createTaniComponent();
                connectCSS2(pl, tan, "border-bottom-right-radius");
            </SCRIPT>
        </td>
    </tr>
</table>
<script>
    // Get the draggable window and header
    var dragWindow = document.getElementById("dragWindow");
    var dragHeader = document.getElementById("dragHeader");

    let offsetX, offsetY;

    // Function to start dragging
    function dragStart(e) {
        offsetX = e.clientX - dragWindow.offsetLeft;
        offsetY = e.clientY - dragWindow.offsetTop;
        document.addEventListener('mousemove', dragMove);
        document.addEventListener('mouseup', dragEnd);
    }

    // Function to move the window
    function dragMove(e) {
        dragWindow.style.left = (e.clientX - offsetX) + 'px';
        dragWindow.style.top = (e.clientY - offsetY) + 'px';
    }

    // Function to stop dragging
    function dragEnd() {
        document.removeEventListener('mousemove', dragMove);
        document.removeEventListener('mouseup', dragEnd);
    }

    // Add event listeners for dragging
    dragHeader.addEventListener('mousedown', dragStart);
</script>
<script>
    const channel_designer = new BroadcastChannel('designer_channel');
    function splitValueAndUnit(value) {
        const regex = /^([\d.]+)\s*([a-zA-Z%]+)$/;
        const match = value.match(regex);

        if (match) {
            const numberPart = parseFloat(match[1], 10);
            const unitPart = match[2];
            return { number: numberPart, unit: unitPart };
        } else {
            return { number: value, unit: '' };
        }
    }
    channel_designer.onmessage = function(event) {
        huoqu_flag = true;

        if (event.data.key1 == 'body'){
            //模拟显示值
            const messages1Input = document.getElementById('main_el_id');
            messages1Input.value = '';
        }
        else{
            //模拟显示值
            const messages1Input = document.getElementById('main_el_id');
            var wordarray = event.data.key1.split(' ');
            messages1Input.value = wordarray[0].replace('#','');

        }
        document.getElementById('new_main_el_id').value = '';

        const messagesInput = document.getElementById('cssTagname');
        messagesInput.value = event.data.key1;
        //console.log.log(event.data.key2);
        const json_data = event.data.key2;
        //console.log.log(JSON.stringify(json_data));
        //字体颜色
        if ('color' in json_data){
            const color1Input = document.getElementById('QrColorPicker0#color');
            color1Input.style.backgroundColor = json_data['color'];
            const color1Span = document.getElementById('QrColorPicker0#text');
            color1Span.innerText = json_data['color'];
            connectInstanceMap['color'] = json_data['color'];
            setTargetStyle('color', json_data['color']);
        }
        //文字字体
        if ('font-family' in json_data){
            const color1Input = document.getElementById('QrPulldown0#input');
            color1Input.value = json_data['font-family'];
            connectInstanceMap['font-family'] = json_data['font-family'];
            setTargetStyle('font-family', json_data['font-family']);
        }
        else{
            const color1Input = document.getElementById('QrPulldown0#input');
            color1Input.value = '';
        }
        //字体大小
        if ('font-size' in json_data){
            const color1Input = document.getElementById('QrPulldown1#input');
            color1Input.value = json_data['font-size'];
            connectInstanceMap['font-size'] = json_data['font-size'];
            setTargetStyle('font-size', json_data['font-size']);
        }
        else{
            const color1Input = document.getElementById('QrPulldown0#input');
            color1Input.value = '';
        }
        //文字粗细
        if ('font-weight' in json_data){
            const color1Input = document.getElementById('QrPulldown2#input');
            color1Input.value = json_data['font-weight'];
            connectInstanceMap['font-weight'] = json_data['font-weight'];
            setTargetStyle('font-weight', json_data['font-weight']);
        }
        else{
            const color1Input = document.getElementById('QrPulldown2#input');
            color1Input.value = '';
        }
        //font-style 文字样式
        if ('font-style' in json_data){
            const color1Input = document.getElementById('QrPulldown3#input');
            color1Input.value = json_data['font-style'];
            connectInstanceMap['font-style'] = json_data['font-style'];
            setTargetStyle('font-style', json_data['font-style']);
        }
        else{
            const color1Input = document.getElementById('QrPulldown3#input');
            color1Input.value = '';
        }
        //font-variant 文字变量
        if ('font-variant' in json_data){
            const color1Input = document.getElementById('QrPulldown4#input');
            color1Input.value = json_data['font-variant'];
            connectInstanceMap['font-variant'] = json_data['font-variant'];
            setTargetStyle('font-variant', json_data['font-variant']);
        }
        else{
            const color1Input = document.getElementById('QrPulldown4#input');
            color1Input.value = '';
        }
        //文字行高 line-height
        if ('line-height' in json_data){
            var result = splitValueAndUnit(json_data['line-height']);
            const bgcolor1Input = document.getElementById('QrSpinner0#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown5#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['line-height'] = json_data['line-height'];
            setTargetStyle('line-height', json_data['line-height']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner0#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown5#input');
            bgcolor1Span.innerText = 'px';
        }

        //背景颜色
        if ('background-color' in json_data){
            const bgcolor1Input = document.getElementById('QrColorPicker1#color');
            bgcolor1Input.style.backgroundColor = json_data['background-color'];
            const bgcolor1Span = document.getElementById('QrColorPicker1#text');
            bgcolor1Span.innerText = json_data['background-color'];
            connectInstanceMap['background-color'] = json_data['background-color'];
            setTargetStyle('background-color', json_data['background-color']);
        }
        //背景图片background-image
        if ('background-image' in json_data){
            const color1Input = document.getElementById('QrPulldown6#input');
            color1Input.value = json_data['background-image'];
            connectInstanceMap['background-image'] = json_data['background-image'];
            setTargetStyle('background-image', json_data['background-image']);
        }
        else {
            const color1Input = document.getElementById('QrPulldown6#input');
            color1Input.value = '';
        }
        //背景拉伸 background-repeat
        if ('background-repeat' in json_data){
            const color1Input = document.getElementById('QrPulldown7#input');
            color1Input.value = json_data['background-repeat'];
            connectInstanceMap['background-repeat'] = json_data['background-repeat'];
            setTargetStyle('background-repeat', json_data['background-repeat']);
        }
        else {
            const color1Input = document.getElementById('QrPulldown7#input');
            color1Input.value = '';
        }
        //background-position 背景定位
        if ('background-position' in json_data){
            const color1Input = document.getElementById('QrPulldown8#input');
            color1Input.value = json_data['background-position'];
            connectInstanceMap['background-position'] = json_data['background-position'];
            setTargetStyle('background-position', json_data['background-position']);
        }
        else {
            const color1Input = document.getElementById('QrPulldown8#input');
            color1Input.value = '';
        }
        //background-attachment 背景附件属性
        if ('background-attachment' in json_data){
            const color1Input = document.getElementById('QrPulldown9#input');
            color1Input.value = json_data['background-attachment'];
            connectInstanceMap['background-attachment'] = json_data['background-attachment'];
            setTargetStyle('background-attachment', json_data['background-attachment']);
        }
        else {
            const color1Input = document.getElementById('QrPulldown9#input');
            color1Input.value = '';
        }

        //整体大小
        if ('width' in json_data){
            var result = splitValueAndUnit(json_data['width']);
            const bgcolor1Input = document.getElementById('QrSpinner1#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown10#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['width'] = json_data['width'];
            setTargetStyle('width', json_data['width']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner1#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown10#input');
            bgcolor1Span.innerText = 'px';
        }
        if ('height' in json_data){
            // 背景颜色         //console.log.log(json_data['color']);
            var result = splitValueAndUnit(json_data['height']);
            const bgcolor1Input = document.getElementById('QrSpinner2#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown11#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['height'] = json_data['height'];
            setTargetStyle('height', json_data['height']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner2#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown11#input');
            bgcolor1Span.innerText = 'px';
        }
        //overflow没有了，用block替换
        if ('overflow-block' in json_data){
            const bgcolor1Input = document.getElementById('QrPulldown12#input');
            bgcolor1Input.value = json_data['overflow-block'];
            connectInstanceMap['overflow'] = json_data['overflow-block'];
            setTargetStyle('overflow', json_data['overflow-block']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrPulldown12#input');
            bgcolor1Input.value = '';
        }
        //可视化设置  层
        if ('z-index' in json_data){
            const bgcolor1Input = document.getElementById('QrSpinner3#input');
            bgcolor1Input.value = json_data['z-index'];
            connectInstanceMap['z-index'] = json_data['z-index'];
            setTargetStyle('z-index', json_data['z-index']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner3#input');
            bgcolor1Input.value = '';
        }
        //显示属性
        if ('display' in json_data){
            const bgcolor1Input = document.getElementById('QrPulldown13#input');
            bgcolor1Input.value = json_data['display'];
            connectInstanceMap['display'] = json_data['display'];
            setTargetStyle('display', json_data['display']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrPulldown13#input');
            bgcolor1Input.value = '';
        }
        //visibility 是否可见
        if ('visibility' in json_data){
            const bgcolor1Input = document.getElementById('QrPulldown14#input');
            bgcolor1Input.value = json_data['visibility'];
            connectInstanceMap['visibility'] = json_data['visibility'];
            setTargetStyle('visibility', json_data['visibility']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrPulldown14#input');
            bgcolor1Input.value = '';
        }
        //position 资源定位
        if ('position' in json_data){
            const bgcolor1Input = document.getElementById('QrPulldown15#input');
            bgcolor1Input.value = json_data['position'];
            connectInstanceMap['position'] = json_data['position'];
            setTargetStyle('position', json_data['position']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrPulldown15#input');
            bgcolor1Input.value = '';
        }
        //top
        if ('top' in json_data){
            var result = splitValueAndUnit(json_data['top']);
            const bgcolor1Input = document.getElementById('QrSpinner4#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown16#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['top'] = json_data['top'];
            setTargetStyle('top', json_data['top']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner4#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown16#input');
            bgcolor1Span.innerText = 'px';
        }
        if ('left' in json_data){
            var result = splitValueAndUnit(json_data['left']);
            const bgcolor1Input = document.getElementById('QrSpinner5#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown17#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['left'] = json_data['left'];
            setTargetStyle('left', json_data['left']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner5#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown17#input');
            bgcolor1Span.innerText = 'px';
        }
        if ('right' in json_data){
            var result = splitValueAndUnit(json_data['right']);
            const bgcolor1Input = document.getElementById('QrSpinner6#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown18#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['right'] = json_data['right'];
            setTargetStyle('right', json_data['right']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner6#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown18#input');
            bgcolor1Span.innerText = 'px';
        }
        if ('bottom' in json_data){
            var result = splitValueAndUnit(json_data['bottom']);
            const bgcolor1Input = document.getElementById('QrSpinner7#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown19#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['bottom'] = json_data['bottom'];
            setTargetStyle('bottom', json_data['bottom']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner7#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown19#input');
            bgcolor1Span.innerText = 'px';
        }

        //边框border-width
        if ('border-top-width' in json_data){
            var result = splitValueAndUnit(json_data['border-top-width']);
            const bgcolor1Input = document.getElementById('QrSpinner8#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown20#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['border-width'] = json_data['border-top-width'];
            setTargetStyle('border-width', json_data['border-top-width']);

            const bgcolor2Input = document.getElementById('QrSpinner9#input');
            bgcolor2Input.value = result.number;
            const bgcolor2Span = document.getElementById('QrPulldown21#input');
            bgcolor2Span.innerText = result.unit;
        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner8#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown20#input');
            bgcolor1Span.innerText = 'px';
            const bgcolor2Input = document.getElementById('QrSpinner9#input');
            bgcolor2Input.value = '';
            const bgcolor2Span = document.getElementById('QrPulldown21#input');
            bgcolor2Span.innerText = 'px';
        }

        if ('border-left-width' in json_data){
            var result = splitValueAndUnit(json_data['border-left-width']);
            const bgcolor1Input = document.getElementById('QrSpinner10#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown22#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['border-left-width'] = json_data['border-left-width'];
            setTargetStyle('border-left-width', json_data['border-left-width']);

        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner10#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown22#input');
            bgcolor1Span.innerText = 'px';
        }
        if ('border-right-width' in json_data){
            var result = splitValueAndUnit(json_data['border-right-width']);
            const bgcolor1Input = document.getElementById('QrSpinner11#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown23#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['border-right-width'] = json_data['border-right-width'];
            setTargetStyle('border-right-width', json_data['border-right-width']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner11#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown23#input');
            bgcolor1Span.innerText = 'px';
        }
        if ('border-bottom-width' in json_data){
            var result = splitValueAndUnit(json_data['border-bottom-width']);
            const bgcolor1Input = document.getElementById('QrSpinner12#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown24#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['border-bottom-width'] = json_data['border-bottom-width'];
            setTargetStyle('border-bottom-width', json_data['border-bottom-width']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner12#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown24#input');
            bgcolor1Span.innerText = 'px';
        }

        if ('border-top-color' in json_data){
            const bgcolor1Input = document.getElementById('QrColorPicker2#color');
            bgcolor1Input.style.backgroundColor = json_data['border-top-color'];
            const bgcolor1Span = document.getElementById('QrColorPicker2#text');
            bgcolor1Span.innerText = json_data['border-top-color'];

            connectInstanceMap['border-color'] = json_data['border-top-color'];
            setTargetStyle('border-color', json_data['border-top-color']);

            const bgcolor2Input = document.getElementById('QrColorPicker3#color');
            bgcolor2Input.style.backgroundColor = json_data['border-top-color'];
            const bgcolor2Span = document.getElementById('QrColorPicker3#text');
            bgcolor2Span.innerText = json_data['border-top-color'];
        }
        if ('border-left-color' in json_data){
            const bgcolor1Input = document.getElementById('QrColorPicker4#color');
            bgcolor1Input.style.backgroundColor = json_data['border-left-color'];
            const bgcolor1Span = document.getElementById('QrColorPicker4#text');
            bgcolor1Span.innerText = json_data['border-left-color'];

            connectInstanceMap['border-left-color'] = json_data['border-left-color'];
            setTargetStyle('border-left-color', json_data['border-left-color']);
        }
        if ('border-right-color' in json_data){
            const bgcolor1Input = document.getElementById('QrColorPicker5#color');
            bgcolor1Input.style.backgroundColor = json_data['border-right-color'];
            const bgcolor1Span = document.getElementById('QrColorPicker5#text');
            bgcolor1Span.innerText = json_data['border-right-color'];

            connectInstanceMap['border-right-color'] = json_data['border-right-color'];
            setTargetStyle('border-right-color', json_data['border-right-color']);
        }
        if ('border-bottom-color' in json_data){
            const bgcolor1Input = document.getElementById('QrColorPicker6#color');
            bgcolor1Input.style.backgroundColor = json_data['border-bottom-color'];
            const bgcolor1Span = document.getElementById('QrColorPicker6#text');
            bgcolor1Span.innerText = json_data['border-bottom-color'];

            connectInstanceMap['border-bottom-color'] = json_data['border-bottom-color'];
            setTargetStyle('border-bottom-color', json_data['border-bottom-color']);
        }

        //边框样式
        if ('border-top-style' in json_data){
            const bgcolor1Input = document.getElementById('QrPulldown25#input');
            bgcolor1Input.value = json_data['border-top-style'];
            const bgcolor1Span = document.getElementById('QrPulldown26#input');
            bgcolor1Span.value = json_data['border-top-style'];

            connectInstanceMap['border-top-style'] = json_data['border-top-style'];
            setTargetStyle('border-style', json_data['border-top-style']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrPulldown25#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown26#input');
            bgcolor1Span.value = '';
        }
        if ('border-left-style' in json_data){
            const bgcolor1Input = document.getElementById('QrPulldown27#input');
            bgcolor1Input.value = json_data['border-left-style'];

            connectInstanceMap['border-left-style'] = json_data['border-left-style'];
            setTargetStyle('border-left-style', json_data['border-left-style']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrPulldown27#input');
            bgcolor1Input.value = '';
        }
        if ('border-right-style' in json_data){
            const bgcolor1Input = document.getElementById('QrPulldown28#input');
            bgcolor1Input.value = json_data['border-right-style'];

            connectInstanceMap['border-right-style'] = json_data['border-right-style'];
            setTargetStyle('border-right-style', json_data['border-right-style']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrPulldown28#input');
            bgcolor1Input.value = '';
        }
        if ('border-bottom-style' in json_data){
            const bgcolor1Input = document.getElementById('QrPulldown29#input');
            bgcolor1Input.value = json_data['border-bottom-style'];

            connectInstanceMap['border-bottom-style'] = json_data['border-bottom-style'];
            setTargetStyle('border-bottom-style', json_data['border-bottom-style']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrPulldown29#input');
            bgcolor1Input.value = '';
        }
        if ('padding-top' in json_data){
            var result = splitValueAndUnit(json_data['padding-top']);
            const bgcolor1Input = document.getElementById('QrSpinner13#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown30#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['padding-top'] = json_data['padding-top'];
            setTargetStyle('padding-top', json_data['padding-top']);

            const bgcolor2Input = document.getElementById('QrSpinner14#input');
            bgcolor2Input.value = result.number;
            const bgcolor2Span = document.getElementById('QrPulldown31#input');
            bgcolor2Span.innerText = result.unit;
        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner13#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown30#input');
            bgcolor1Span.innerText = 'px';
            const bgcolor2Input = document.getElementById('QrSpinner14#input');
            bgcolor2Input.value = '';
            const bgcolor2Span = document.getElementById('QrPulldown31#input');
            bgcolor2Span.innerText = 'px';
        }
        if ('padding-left' in json_data){
            var result = splitValueAndUnit(json_data['padding-left']);
            const bgcolor1Input = document.getElementById('QrSpinner15#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown32#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['padding-left'] = json_data['padding-left'];
            setTargetStyle('padding-left', json_data['padding-left']);

        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner15#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown32#input');
            bgcolor1Span.innerText = 'px';
        }
        if ('padding-right' in json_data){
            var result = splitValueAndUnit(json_data['padding-right']);
            const bgcolor1Input = document.getElementById('QrSpinner16#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown33#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['padding-right'] = json_data['padding-right'];
            setTargetStyle('padding-right', json_data['padding-right']);

        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner16#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown33#input');
            bgcolor1Span.innerText = 'px';
        }
        if ('padding-bottom' in json_data){
            var result = splitValueAndUnit(json_data['padding-bottom']);
            const bgcolor1Input = document.getElementById('QrSpinner17#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown34#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['padding-bottom'] = json_data['padding-bottom'];
            setTargetStyle('padding-bottom', json_data['padding-bottom']);

        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner17#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown34#input');
            bgcolor1Span.innerText = 'px';
        }
        //margin
        if ('margin-top' in json_data){
            var result = splitValueAndUnit(json_data['margin-top']);
            const bgcolor1Input = document.getElementById('QrSpinner18#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown35#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['margin-top'] = json_data['margin-top'];
            setTargetStyle('margin-top', json_data['margin-top']);

            const bgcolor2Input = document.getElementById('QrSpinner19#input');
            bgcolor2Input.value = result.number;
            const bgcolor2Span = document.getElementById('QrPulldown36#input');
            bgcolor2Span.innerText = result.unit;
        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner18#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown35#input');
            bgcolor1Span.innerText = 'px';
            const bgcolor2Input = document.getElementById('QrSpinner19#input');
            bgcolor2Input.value = '';
            const bgcolor2Span = document.getElementById('QrPulldown36#input');
            bgcolor2Span.innerText = 'px';
        }
        if ('margin-left' in json_data){
            var result = splitValueAndUnit(json_data['margin-left']);
            const bgcolor1Input = document.getElementById('QrSpinner20#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown37#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['margin-left'] = json_data['margin-left'];
            setTargetStyle('margin-left', json_data['margin-left']);

        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner20#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown37#input');
            bgcolor1Span.innerText = 'px';
        }
        if ('margin-right' in json_data){
            var result = splitValueAndUnit(json_data['margin-right']);
            const bgcolor1Input = document.getElementById('QrSpinner21#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown38#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['margin-right'] = json_data['margin-right'];
            setTargetStyle('margin-right', json_data['margin-right']);

        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner21#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown38#input');
            bgcolor1Span.innerText = 'px';
        }
        if ('margin-bottom' in json_data){
            var result = splitValueAndUnit(json_data['margin-bottom']);
            const bgcolor1Input = document.getElementById('QrSpinner22#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown39#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['margin-bottom'] = json_data['margin-bottom'];
            setTargetStyle('margin-bottom', json_data['margin-bottom']);

        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner22#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown39#input');
            bgcolor1Span.innerText = 'px';
        }

        //clear
        if ('clear' in json_data){
            const bgcolor1Input = document.getElementById('QrPulldown40#input');
            bgcolor1Input.value = json_data['clear'];

            connectInstanceMap['clear'] = json_data['clear'];
            setTargetStyle('clear', json_data['clear']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrPulldown40#input');
            bgcolor1Input.value = '';
        }
        //float
        if ('float' in json_data){
            const bgcolor1Input = document.getElementById('QrPulldown41#input');
            bgcolor1Input.value = json_data['float'];

            connectInstanceMap['float'] = json_data['float'];
            setTargetStyle('float', json_data['float']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrPulldown41#input');
            bgcolor1Input.value = '';
        }
        //text-align
        if ('text-align' in json_data){
            const bgcolor1Input = document.getElementById('QrPulldown42#input');
            bgcolor1Input.value = json_data['text-align'];

            connectInstanceMap['text-align'] = json_data['text-align'];
            setTargetStyle('text-align', json_data['text-align']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrPulldown42#input');
            bgcolor1Input.value = '';
        }
        //text-decoration
        if ('text-decoration' in json_data){
            const bgcolor1Input = document.getElementById('QrPulldown43#input');
            bgcolor1Input.value = json_data['text-decoration'];

            connectInstanceMap['text-decoration'] = json_data['text-decoration'];
            setTargetStyle('text-decoration', json_data['text-decoration']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrPulldown43#input');
            bgcolor1Input.value = '';
        }
        //text-indent
        if ('text-indent' in json_data){
            var result = splitValueAndUnit(json_data['text-indent']);
            const bgcolor1Input = document.getElementById('QrSpinner23#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown40#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['text-indent'] = json_data['text-indent'];
            setTargetStyle('text-indent', json_data['text-indent']);

        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner23#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown40#input');
            bgcolor1Span.innerText = 'px';
        }
        //letter-spacing
        if ('letter-spacing' in json_data){
            var result = splitValueAndUnit(json_data['letter-spacing']);
            const bgcolor1Input = document.getElementById('QrSpinner24#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown41#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['letter-spacing'] = json_data['letter-spacing'];
            setTargetStyle('letter-spacing', json_data['letter-spacing']);

        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner24#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown41#input');
            bgcolor1Span.innerText = 'px';
        }
        //word-spacing
        if ('word-spacing' in json_data){
            var result = splitValueAndUnit(json_data['word-spacing']);
            const bgcolor1Input = document.getElementById('QrSpinner25#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown42#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['word-spacing'] = json_data['word-spacing'];
            setTargetStyle('word-spacing', json_data['word-spacing']);

        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner25#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown42#input');
            bgcolor1Span.innerText = 'px';
        }
        //text-transform
        if ('text-transform' in json_data){
            const bgcolor1Input = document.getElementById('QrPulldown47#input');
            bgcolor1Input.value = json_data['text-transform'];

            connectInstanceMap['text-transform'] = json_data['text-transform'];
            setTargetStyle('text-transform', json_data['text-transform']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrPulldown47#input');
            bgcolor1Input.value = '';
        }
        //vertical-align
        if ('vertical-align' in json_data){
            const bgcolor1Input = document.getElementById('QrPulldown48#input');
            bgcolor1Input.value = json_data['vertical-align'];

            connectInstanceMap['vertical-align'] = json_data['vertical-align'];
            setTargetStyle('vertical-align', json_data['vertical-align']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrPulldown48#input');
            bgcolor1Input.value = '';
        }

        //cursor
        if ('cursor' in json_data){
            const bgcolor1Input = document.getElementById('QrPulldown49#input');
            bgcolor1Input.value = json_data['cursor'];

            connectInstanceMap['cursor'] = json_data['cursor'];
            setTargetStyle('cursor', json_data['cursor']);
        }
        else{
            const bgcolor1Input = document.getElementById('QrPulldown49#input');
            bgcolor1Input.value = '';
        }
        //border-top-left-radius
        if ('border-top-left-radius' in json_data){
            var result = splitValueAndUnit(json_data['border-top-left-radius']);
            const bgcolor1Input = document.getElementById('QrSpinner26#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown43#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['border-top-left-radius'] = json_data['border-top-left-radius'];
            setTargetStyle('border-top-left-radius', json_data['border-top-left-radius']);

        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner26#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown43#input');
            bgcolor1Span.innerText = 'px';
        }
        //border-top-right-radius
        if ('border-top-right-radius' in json_data){
            var result = splitValueAndUnit(json_data['border-top-right-radius']);
            const bgcolor1Input = document.getElementById('QrSpinner27#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown44#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['border-top-right-radius'] = json_data['border-top-right-radius'];
            setTargetStyle('border-top-right-radius', json_data['border-top-right-radius']);

        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner27#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown44#input');
            bgcolor1Span.innerText = 'px';
        }
        //border-bottom-left-radius
        if ('border-bottom-left-radius' in json_data){
            var result = splitValueAndUnit(json_data['border-bottom-left-radius']);
            const bgcolor1Input = document.getElementById('QrSpinner28#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown45#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['border-bottom-left-radius'] = json_data['border-bottom-left-radius'];
            setTargetStyle('border-bottom-left-radius', json_data['border-bottom-left-radius']);

        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner28#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown45#input');
            bgcolor1Span.innerText = 'px';
        }
        //border-bottom-right-radius
        if ('border-bottom-right-radius' in json_data){
            var result = splitValueAndUnit(json_data['border-bottom-right-radius']);
            const bgcolor1Input = document.getElementById('QrSpinner29#input');
            bgcolor1Input.value = result.number;
            const bgcolor1Span = document.getElementById('QrPulldown46#input');
            bgcolor1Span.innerText = result.unit;
            connectInstanceMap['border-bottom-right-radius'] = json_data['border-bottom-right-radius'];
            setTargetStyle('border-bottom-right-radius', json_data['border-bottom-right-radius']);

        }
        else{
            const bgcolor1Input = document.getElementById('QrSpinner29#input');
            bgcolor1Input.value = '';
            const bgcolor1Span = document.getElementById('QrPulldown46#input');
            bgcolor1Span.innerText = 'px';
        }
        huoqu_flag = false;
    };
    function channel_designer_sendMessage(message) {
        if (message) {
            channel_designer.postMessage(message);
        }
    }
</script>
<script>
    // 获取按钮元素
    const getElementCss = document.getElementById('getElementCss');
    // 添加点击事件监听器
    getElementCss.addEventListener('click', function() {
        //向designer发送获取想要的元素的css
        var msg = {"key1":'getcss','key2':document.getElementById('cssTagname').value};
        channel_designer_sendMessage(msg);
    });

    // 获取按钮元素
    const setElementCss = document.getElementById('setElementCss');
    // 添加点击事件监听器
    setElementCss.addEventListener('click', function() {
        //向designer发送获取想要的元素的css
        var msg = {"key1":'setcss','key2':document.getElementById('cssTagname').value,'key3':{
                'color':document.getElementById('QrColorPicker0#text').innerText
            }};
        channel_designer_sendMessage(msg);
    });

    // 获取按钮元素
    const delElement = document.getElementById('delElement');
    // 添加点击事件监听器
    delElement.addEventListener('click', function() {
        let userConfirmed = confirm("确定要删除此元素吗?");

        // 根据用户的响应更新页面内容
        if (userConfirmed) {
            //向designer发送获取想要的元素的css
            var msg = {"key1":'delelement','key2':document.getElementById('cssTagname').value};
            channel_designer_sendMessage(msg);
        }
    });

    // 获取按钮元素
    const modElementId = document.getElementById('modElementId');
    // 添加点击事件监听器
    modElementId.addEventListener('click', function() {
        let userConfirmed = confirm("确定要修改此元素吗?");

        // 根据用户的响应更新页面内容
        if (userConfirmed) {
            //向designer发送获取想要的元素的css
            var msg = {"key1":'modelementid','key2':document.getElementById('main_el_id').value,'key3':document.getElementById('new_main_el_id').value};
            channel_designer_sendMessage(msg);
        }
    });

</script>
</body>
</html>

<!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd -->
</html>
